// 引入路由实例
import router from '@/router'
// 引入 store vuex 实例
import store from '@/store'

// 调用路由守卫
router.beforeEach(async(to, from, next) => {
  const token = store.getters.token
  const url = to.path
  const whiteList = ['/login', '/404', '/test']

  // 1. 有 token 去 登录页 => 跳到首页
  if (token && url === '/login') {
    next('/')
  }

  // 2. 有 token 不是去登录页 => 放行
  if (token && url !== '/login') {
    // 这里是用户已经登录, 并且不是进入登录页的状况
    // 其实用户登录后的出登录页外所有页面都需要用户数据
    // 所以用户数据的获取, 应该就在这
    // 注意数据的获取时异步的, 所以要等待数据获取完毕
    // 注意如果之前已经拿过数据(当前页面是从别的页面跳转, 而不是刷新)就不重复获取了
    // if (!store.state.user.userInfo) {
    if (!store.state.user.userInfo.userId) {
      await store.dispatch('user/getUserInfo')
      // 获取用户数据之后, 跳转页面之前
      // 这里是路由守卫刚刚获取完当前用户数据
      // 还没有跳转页面, 可以拿到当前用户权限标记
      // 交给 vuex 筛选 action
      // console.log('刚获取用户信息')
      // console.log(store.state.user.userInfo)
      const { roles } = store.state.user.userInfo
      const routes = await store.dispatch('permission/filterRoutes', roles.menus)
      // 接收到筛选出来的有权限动态路由, 通过 addRoutes 添加即可
      router.addRoutes([
        ...routes,
        { path: '*', redirect: '/404', hidden: true }
      ])

      // 添加过路由后, 也不会重新匹配的, 所有在这之前没有的路由都会渲染成白屏
      // 要拿到当前的目的地, 在强制跳转一次, 让这个逻辑从头再执行一次匹配流程
      next(to.path)
    } else {
      // 如果不需要获取数据添加路由, 直接放行即可
      next()
    }
  }

  // 3. 没有 token 在 白名单 => 放行
  if (!token && whiteList.includes(url)) {
    next()
  }

  // 4. 没有token 不在白名单 = > 跳到登录页
  if (!token && !whiteList.includes(url)) {
    next('/login')
  }
})
